<template>
  <div class="app-container">


  <el-button type="primary" size="default" @click="active = true,ColorAttributeDefinitionGet()">单色系明细</el-button>
  <el-button type="primary" size="default" @click="active = false,ColorAttributeDefinitionGet1()">多色系明细</el-button>
  <div >
      <div v-if="active">
        <JFind @findClicked="findData3" @Launchform="Launchform5" :searchTitle="'单色系筛选条件查询'" :OriginalFilter="{ static: true }" :formList="formList" />
        
    
      <div style="width: 70%;">
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            class="mt5"
            :isLoading="isLoading"
             @download="download"
             @inputChange="inputChange"
          />
          <PageModule
            :PageData="{ total, pageShow: false, pageSizeShow: true, buttonS: true }"
            @pageSizeChange="handleSizeChange"
            @pageChange="handleCurrentChange"
          />
        </div>
      </div>


      <div v-else>
        <JFind
        :className="'Find2'"
        :searchTitle="'插色系筛选条件查询'"
        :OriginalFilter="{ static: true }"
        :formList="formList2"
        @findClicked="findClicked2"
        @inputChange="inputChange"
        @Launchform="Launchform6"
      />
      <div style="width: 70%">
          <Table
            :tableHeader="tableHeader1"
            :tableData="tableData2"
             @download="download"
             @inputChange="inputChange"
          />
          <PageModule :PageData="{ total: total2 }" :layout="'prev, pager'" @pageSizeChange="handleSizeChange2" @pageChange="handleCurrentChange2" />
        </div>

      </div>
  </div>
</div>
  <!-- 宽幅定义修改 -->
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible12" title="单色系新增" width="25%" class="dialog pb0">
    <el-form ref="postRef"  label-width="110px">
      <el-form-item label="内部色号"> 
        <el-input v-model="ColorAttributeDefinitionParsm.colorCode" placeholder="请输入颜色编号" />
      </el-form-item>
      <el-form-item label="品牌色号"> 
        <el-input v-model="ColorAttributeDefinitionParsm.brandColor" placeholder="请输入颜色编号" />
      </el-form-item>
      <el-form-item label="颜色(主色)">
        <el-input v-model="ColorAttributeDefinitionParsm.color" placeholder="请输入颜色(中)" />
      </el-form-item>
      <el-form-item label="颜色(英)">
        <el-input v-model="ColorAttributeDefinitionParsm.engColor" placeholder="请输入颜色(英)" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ColorAttributeDefinitionMethods">确 定</el-button>
        <el-button @click="dialogVisible12 = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>

    <!-- 宽幅定义修改 -->
    <el-dialog :close-on-click-modal="false" v-model="dialogVisible13" title="插色系新增" width="25%" class="dialog pb0">
    <el-form ref="postRef"  label-width="110px">
      <el-form-item label="内部色号"> 
        <el-input v-model="ColorAttributeDefinitionParsm1.colorCode" placeholder="请输入颜色编号" />
      </el-form-item>
      <el-form-item label="品牌色号"> 
        <el-input v-model="ColorAttributeDefinitionParsm1.brandColor" placeholder="请输入颜色编号" />
      </el-form-item>
      <el-form-item label="颜色(主色)">
        <el-input v-model="ColorAttributeDefinitionParsm1.color" placeholder="请输入颜色(中)" />
      </el-form-item>
      <el-form-item label="颜色(英)">
        <el-input v-model="ColorAttributeDefinitionParsm1.engColor" placeholder="请输入颜色(英)" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ColorAttributeDefinitionMethods1">确 定</el-button>
        <el-button @click="dialogVisible13 = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { ref,onMounted } from 'vue';
  export default defineComponent({
    name:'ColorAttributeDefinition'
  })
</script>
<script lang="ts" setup>
import {addColorAttributeDefinition,getColorAttributeDefinition,deleteColorAttributeDefinition} from '@/api/ControlDepartment/MaterialManagement/ColorAttributeDefinition'
import service from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
const Launchform6 = (row:any) => {

getColorAttributeDefinitionParms1.value.color = row[0].inputValue
getColorAttributeDefinitionParms1.value.engColor = row[1].inputValue

}
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入插色系颜色(英)',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '新增插色系',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '搜索',
  },
]) as any
const tableData2 = ref([])

const dialogVisible13 = ref(false)

const findClicked2 = (row:string) => {
  if (row === '新增插色系') {
    dialogVisible13.value = true 
  }
  if(row === '搜索'){
    ColorAttributeDefinitionGet1() 
  }
}
const ColorAttributeDefinitionParsm1 = ref({
  color: "",
  colorCode: "",
  colorName: "",
  colorSystem: "",
  engColor: "",
  id: 0,
  pantone: "",
  brandColor:'',
  currentPage:1,
  pageSize:40
})


const ColorAttributeDefinitionMethods1 = async () => {
  if(ColorAttributeDefinitionParsm1.value.engColor === '' || ColorAttributeDefinitionParsm1.value.color === '' || ColorAttributeDefinitionParsm1.value.colorCode ===''){
    ElMessage.warning('请输入完整信息')
    return 
  }
  ColorAttributeDefinitionParsm1.value.colorSystem = '插色系'
  const res = await addColorAttributeDefinition(ColorAttributeDefinitionParsm1.value)
  if (res.code === 200) {
    ColorAttributeDefinitionParsm1.value.color = ''
    ColorAttributeDefinitionParsm1.value.colorCode = ''
    ColorAttributeDefinitionParsm1.value.colorName = ''
    ColorAttributeDefinitionParsm1.value.engColor = ''
    ColorAttributeDefinitionParsm1.value.pantone = ''
    ColorAttributeDefinitionParsm1.value.brandColor = ''
    dialogVisible13.value = false
    ColorAttributeDefinitionGet1()
   ElMessage.success(res.msg) 
  }else{
    ElMessage.error(res.msg)
  }
}

const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  ColorAttributeDefinitionParsm1.value.pageSize = val
  ColorAttributeDefinitionGet1()
}
const handleCurrentChange2 = (val: number) => {
  ColorAttributeDefinitionParsm1.value.currentPage = val
  ColorAttributeDefinitionGet1()
}

// 查询
const getColorAttributeDefinitionParms1 = ref({
  color: "",
  colorCode: "",
  colorName: "",
  colorSystem: "插色系",
  engColor: "",
  id: 0,
  pantone:"",
  
})
const ColorAttributeDefinitionGet1 = async () => {
  isLoading.value = true
  const res = await getColorAttributeDefinition(getColorAttributeDefinitionParms1.value)
  if (res.code === 200) {
    tableData2.value = res.rows.map((item: any, index: number) => {
      item.change = 'Y'
      item.disableConfirm = true
      item.functionRow = [
          {
            label: '删除'
          }
        ]
     return item 
    })
    total2.value = res.total
  }
  isLoading.value = false
}


const tableHeader1 = ref([
  {
    change: true,
    label: '色系',
    prop: 'colorSystem'
  },
  {
    change: true,
    label: '内部色号(PANTONE)',
    prop: 'colorCode'
  },
  {
    change: true,
    label: '品牌色号',
    prop: 'brandColor',
    width: 200
  },
  {
    width: 120,
    change: true,
    label: '材料主色',
    prop: 'color'
  },
  {
    label: '颜色名称',
    prop: 'colorName'
  },
  {
    change: true,
    label: '颜色(英)',
    prop: 'engColor',
    width: 120
  },
  {
    label: '操作',
    prop: 'outSum',
    type: 'functionRow'
  }
])








const active = ref(true)
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入PANTONE',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌色号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单色系颜色(英)',
    inputValue: ''
  },

  {
    type: 'button',
    checkboxLabel: '新增单色系',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '搜索',
  },
])

const inputChange = async (list: any) => {

  const result = await service.put<any, any>(`/mes/color/colorUpdate`, list)
  if (result.code === 200) {
    ColorAttributeDefinitionGet()
    ColorAttributeDefinitionGet1()
    ElMessage.success(result.msg)
  } else {
    ElMessage.error(result.msg)
  }
}

const MaterialPropertyParameterParms = ref('')
const deleteColorAttributeDefinitionMethods = async () => {
  const res = await deleteColorAttributeDefinition(MaterialPropertyParameterParms.value)
  if (res.code === 200) {
    ColorAttributeDefinitionGet() 
    ColorAttributeDefinitionGet1()
    ElMessage.success(res.msg)
  } else{
    ElMessage.error(res.msg)
  }
}

const download = (row: any, item: any) => {
  if (item.label === '删除') {
    MaterialPropertyParameterParms.value = row.id
    
    handleCloseMateriaLKlc5()
  }
}
const handleCloseMateriaLKlc5 = () => {
  ElMessageBox.confirm('确认要删除吗?')
    .then(async () => {
      deleteColorAttributeDefinitionMethods()
    })
    .catch(() => {})
}
const ColorAttributeDefinitionParsm = ref({
  color: "",
  colorCode: "",
  colorName: "",
  colorSystem: "",
  engColor: "",
  id: 0,
  pantone: "",
  brandColor:'',
  brandColor:''
})

const Launchform5 = (row:any) => {

  getColorAttributeDefinitionParms.value.colorCode = row[0].inputValue
  getColorAttributeDefinitionParms.value.brandColor = row[1].inputValue
  getColorAttributeDefinitionParms.value.engColor = row[2].inputValue
  
}
const dialogVisible12 = ref(false)
const findData3 = (row:any) => {
  if(row === '新增单色系'){
    dialogVisible12.value = true
    
  }
  if(row === '搜索'){
    ColorAttributeDefinitionGet()
  }
}

const tableData = ref([])

const ColorAttributeDefinitionMethods = async () => {
  if(ColorAttributeDefinitionParsm.value.engColor === '' || ColorAttributeDefinitionParsm.value.color === '' || ColorAttributeDefinitionParsm.value.colorCode ===''){
    ElMessage.warning('请输入完整信息')
    return 
  }
  ColorAttributeDefinitionParsm.value.colorSystem = '单色系'
  const res = await addColorAttributeDefinition(ColorAttributeDefinitionParsm.value)
  if (res.code === 200) {
    ColorAttributeDefinitionParsm.value.color = ''
    ColorAttributeDefinitionParsm.value.colorCode = ''
    ColorAttributeDefinitionParsm.value.colorName = ''
    ColorAttributeDefinitionParsm.value.engColor = ''
    ColorAttributeDefinitionParsm.value.pantone = ''
    ColorAttributeDefinitionParsm1.value.brandColor = ''
    dialogVisible12.value = false
    ColorAttributeDefinitionGet()
   ElMessage.success(res.msg) 
  }else{
    ElMessage.error(res.msg)
  }
}

onMounted(() => {
  ColorAttributeDefinitionGet()
})

const isLoading = ref(true)
const total = ref(0)

const handleSizeChange = (val: number) => {
  getColorAttributeDefinitionParms.value.pageSize = val
  ColorAttributeDefinitionGet()
}

const handleCurrentChange = (val: number) => {
  getColorAttributeDefinitionParms.value.currentPage = val
  ColorAttributeDefinitionGet()
}
const currentPage = ref(1)
const pageSize = ref(40)
// 查询
const getColorAttributeDefinitionParms = ref({
  color: "",
  colorCode: "",
  colorName: "",
  colorSystem: "单色系",
  engColor: "",
  id: 0,
  pantone:"",
  currentPage:1,
  pageSize:40
  
})
const ColorAttributeDefinitionGet = async () => {
  isLoading.value = true
  const res = await getColorAttributeDefinition(getColorAttributeDefinitionParms.value)
  if (res.code === 200) {
    tableData.value = res.rows.map((item: any, index: number) => {
      item.change = 'Y'
      item.disableConfirm = true
      item.functionRow = [
          {
            label: '删除'
          }
        ]
     return item 
    })
    total.value = res.total
  }
  isLoading.value = false
}

const tableHeader = ref([
  {
    change: true,
    label: '色系',
    prop: 'colorSystem'
  },
  {
    change: true,
    label: '内部色号(PANTONE)',
    prop: 'colorCode'
  },
  {
    change: true,
    sortable: 'custom',
    label: '品牌色号',
    prop: 'brandColor',
    width: 180
  },
  {
    width: 120,
    change: true,
    label: '材料主色',
    prop: 'color'
  },
  {
    change: true,
    label: '颜色名称',
    prop: 'colorName',
    width: 120
  },
  {
    change: true,
    label: '颜色(英)',
    prop: 'engColor',
    width: 120
  },
  {
    label: '操作',
    prop: 'outSum',
    type: 'functionRow'
  }
])
</script>

<style lang="less" scoped>
</style>
